<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
</head>

<body>
  <div>
    <div class="headTitle">
      视频融合
    </div>
    <form action="" class="layui-form">
      <div class="layui-row">
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">所属农场</label>
            <div class="layui-input-block">
              <select name="city" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择1</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">所属管理区</label>
            <div class="layui-input-block">
              <select name="city1" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择1</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md3">
          <div class="layui-form-item">
            <label class="layui-form-label">所属地块</label>
            <div class="layui-input-block">
              <select name="city2" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择1</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md4">
          <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
          <button class="layui-btn layui-btn-primary">重置</button>
          <a href="sptj.html" class="layui-btn">添加</a>
          <a href="###" class="layui-btn">导入</a>
        </div>
      </div>
    </form>
    <div>
      <table id="demoTable" lay-filter="test"></table>
    </div>
  </div>
  <script src="../lib/layui/layui.js"></script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  </script>
</body>

</html>
<script>
    //生成表单
  layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = jQuery = layui.$;
        //第一个实例
        table.render({
            elem: '#demoTable',
            //					height: 315
            //  ,url: '/demo/table/user/' //数据接口
            //						,
            page: true //开启分页
            ,
            cols: [
                [ //表头
                    {
                        field: 'id',
                        title: '序号',
                        width: '10%',
                        align: 'center',
                        fixed: 'left'
                    }, {
                    field: 'username',
                    title: '设备序列号',
                    align: 'center',
                    width: '10%'
                }, {
                    field: 'sex',
                    title: '视频名称',
                    align: 'center',
                    width: '20%'
                }, {
                    field: 'dklx',
                    title: '用户名',
                    align: 'center',
                    width: '10%'
                }, {
                    field: 'city',
                    title: '视频通道',
                    align: 'center',
                    width: '10%'
                }, {
                    field: 'sign',
                    title: '端口',
                    align: 'center',
                    width: '20%'
                }, {
                    field: 'experience',
                    title: '操作',
                    width: '20%',
                    align: 'center',
                    toolbar: '#barDemo'
                }
                ]
            ],
            data: [{ //表格数据
                "id": "10001",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "116",
                "ip": "192.168.0.8",
                "logins": "108",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10002",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14",
            }, {
                "id": "10003",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "65",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10004",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "666",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10005",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "86",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10006",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10007",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "16",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10008",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "106",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }]
        });
        table.on('tool(test)', function (obj) { //表格操作回调
            var layEvent = obj.event
            if (layEvent === 'del') {
                $(this).closest('tr').remove();
            } else if (layEvent === 'edit') {
                console.log(obj)
            } else if (layEvent === 'detail') {
                console.log(obj)
            }
        })
    });
  layui.use('form', function () {
    var form = layui.form;
    //监听提交
    form.on('submit(formDemo)', function (data) { //提交时间回调
      layer.msg(JSON.stringify(data.field));
      return false;
    });
  });
</script>